<template>
	<view class="cascade_bg" v-if="showCascade" :class="showCascade ? 'isHide': ''">
		<view class="close" @click="close"></view>
		<view class="content">
			<view class="desc_title">经验要求</view>
			<view class="text_gap">
				<text class="text_identical" v-for="(item, index) in experice" :key="index"
					v-text="item.name"
					v-model="selectExperice"
					@click="handleExperice(item)"
					:class="item.checked ? 'active' : ''"
					>
				</text>
			</view>
			
			<view class="desc_title">学历要求</view>
			<view class="text_gap">
				<text class="text_identical" v-for="(item, index) in education" :key="index"
					v-text="item.name"
					v-model="selectEducation"
					@click="handleEducation(item)"
					:class="item.checked ? 'active' : ''">
				</text>
			</view>
			
			<view class="desc_title">期望薪资（单选）</view>
			<view class="text_gap">
				<text class="text_identical" v-for="(item, index) in pay" :key="index"
					v-text="item.name"
					v-model="selectPay"
					@click="handlePay(item)"
					:class="item.checked ? 'active' : ''">
				</text>
			</view>
			
			<view class="desc_title">公司规模</view>
			<view class="text_gap">
				<text class="text_identical" v-for="(item, index) in scaleOfCompany" :key="index"
					v-text="item.name"
					v-model="selectScaleOfCompany"
					@click="handleScaleOfCompany(item)"
					:class="item.checked ? 'active' : ''">
				</text>
			</view>
		</view>
		
		<view class="filter_footer">
			<u-button type="primary" class="reset" @click="reset">重置</u-button>
			<u-button type="primary" class="confirm" @click="confirm">确定</u-button>
		</view>
	</view>
</template>

<script>
	import { filterMixin } from './mixins.js'
	export default {
		mixins: [filterMixin],
		data() {
			return {
				showCascade: false,
				selectExperice: ["不限"],
				selectEducation: ["不限"],
				selectPay: ["不限"],
				selectScaleOfCompany: ["不限"]
			}
		},
		methods: {
			// 选择经验
			handleExperice(data) {
				this.selectExperice = this.pubSelect(this.experice, this.selectExperice, data)
			},
			
			// 选择学历
			handleEducation(data) {
				this.selectEducation = this.pubSelect(this.education, this.selectEducation, data)
			},
			
			// 选择薪资
			handlePay(data) {
				let isSingle = true
				this.selectPay = this.pubSelect(this.pay, this.selectPay, data, isSingle)
			},
			
			// 选择公司规模
			handleScaleOfCompany(data) {
				this.selectScaleOfCompany = this.pubSelect(this.scaleOfCompany, this.selectScaleOfCompany, data)
			},
			
			// 公共选择数据
			pubSelect(array, valArr, data, isSingle = false) {
				/* 
					array：原始数据
					valArr：v-model后的数据
					data：点击的对象数据
					isSingle：是否单选
				*/
				if(data.name == '不限') {
					this.clearOtherButton(array, data)
					valArr = ['不限']
				} else {
					data.checked = !data.checked
					array[0].checked = false
					if(valArr.includes('不限')) this.matchFilter(valArr, '不限')
					if(data.checked && !isSingle) {
						valArr.push(data.name)
					} else if (isSingle) {			// 单选
						valArr = data.name
						this.clearOtherButton(this.pay, data)
					} else {
						this.matchFilter(valArr, data.name)
					}
					valArr = !isSingle ? [...new Set(valArr)] : valArr.split()
					// 当页面的按钮全部置空时，选中'不限'按钮
					if(valArr.length < 1) {
						valArr = ['不限']
						array[0].checked = true
					}
				}
				return valArr
			},
			
			// 确认
			confirm() {
				let allArr = {
					selectExperice: this.selectExperice,
					selectEducation: this.selectEducation,
					selectPay: this.selectPay,
					selectScaleOfCompany: this.selectScaleOfCompany
				}
				this.$emit('confirm', allArr)
			},
			
			// 匹配筛选
			matchFilter(arr, str) {
				arr.forEach((item, index)=> {
					if(item == str) {
						arr.splice(index, 1)
					}
				})
			},
			
			// 置空其他按钮
			clearOtherButton(array, data) {
				data.checked = true
				array.forEach(item => {
					if(item.name != data.name) {
						item.checked = false
					}
				})
			},
			
			// 重置按钮
			reset() {
				this.selectExperice = []
				this.selectEducation = []
				this.selectPay = []
				this.selectScaleOfCompany = []				
				// 置全部checked为false
				this.resetChecked(this.experice, this.education, this.pay, this.scaleOfCompany)
			},
			
			resetChecked(...arg) {
				for(let i = 0; i < arg.length; i++) {
					arg[i].forEach(item=> {
						item.checked = false
					})
				}
			},
			
			// 显示幕布
			showCurtain() {
				this.showCascade = true
			},
			
			// 隐藏幕布
			hideCurtain() {
				this.showCascade = false
			},
			
			// 关闭
			close() {
				this.hideCurtain()
			}
		}
	}
</script>

<style scoped lang="scss">
	@import './style/index.scss';
</style>